<template>
  <view>
    <cu-cell v-bind="$attrs" link :required="required" :description="description" @click="handleClick"></cu-cell>
    <uni-popup ref="popup" type="bottom">
      <view class="popup-select__btns">
        <text class="popup-select__btn" @click="handleCancle">取消</text>
        <view class="popup-select__title">{{ $attrs.title }}</view>
        <text class="popup-select__btn" @click="handleConfirm">确定</text>
      </view>
      <view class="popup-select__view">
        <picker-view v-if="visible" :value="pickerValue" @change="onChange" class="picker-view">
          <picker-view-column>
            <view class="select__item" v-for="(item, index) in list" :key="item[valueKey]">
              {{ item[labelKey] }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import CuCell from './cu-cell.vue'
export default {
  components: {
    CuCell
  },
  props: {
    value: '',
    list: {
      type: Array,
      default: []
    },
    labelKey: {
      default: 'label',
      type: String
    },
    valueKey: {
      default: 'value',
      type: String
    },
    required: {
      default: true,
      type: Boolean
    }
  },
  watch: {
    value: {
      handler: function () {
        const index = this.list.findIndex((pet) => pet[this.valueKey] === this.value)
        this.pickerValue = index > -1 ? [index] : [0]
      },
      immediate: true
    },
    list: {
      handler: function () {
        const index = this.list.findIndex((pet) => pet[this.valueKey] === this.value)
        this.pickerValue = index > -1 ? [index] : [0]
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    description() {
      if (!this.value) {
        return ''
      }
      const data = this.list.find((pet) => pet[this.valueKey] === this.value)
      return data ? data[this.labelKey] : ''
    }
  },
  data() {
    return {
      visible: false,
      pickerValue: [0]
    }
  },
  methods: {
    handleClick() {
      this.$refs.popup.open('bottom')
      this.visible = true
    },
    onChange(e) {
      this.pickerValue = e.target.value
    },
    handleConfirm(e) {
      if (!this.pickerValue.length) {
        this.$refs.popup.close()
        return
      }
      const index = this.pickerValue[0]
      if (this.list.length) {
        this.$emit('input', this.list[index][this.valueKey])
        this.$emit('confirm', this.list[index])
      } else {
        this.$emit('confirm', null)
      }
      this.$refs.popup.close()
    },
    handleCancle() {
      this.$refs.popup.close()
    }
  }
}
</script>

<style scoped lang="scss">
.popup-select__view {
  background: #fff;
  .select__item {
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
  }
  .uni-picker-view-indicator {
    height: 80rpx;
  }
}
.popup-select__title {
  font-size: 32rpx;
  max-width: 400rpx;
}
.popup-select__btn {
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
}
.popup-select__btns {
  height: 100rpx;
  padding: 0rpx;
  background: #fff;
  border-bottom: 1rpx solid #eee;
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.picker-view {
  height: 35vh;
}
.bottom {
  margin-bottom: 0 !important;
}
</style>
